<template>
  <view class="container">
    <!-- 倒计时提示 -->
    <view class="countdown-section" v-if="orderInfo.status==1">
     <!-- <view class="countdown">
        <text class="countdown-text">支付剩余时间：</text>
        <text class="countdown-time">{{ countdownTime }}</text>
      </view> -->
    <!--  <view class="hint-text">快去支付吧，超过2分钟未支付，订单将自动取消</view> -->
	   <view class="hint-text">待支付</view>
    </view>
	<view v-if="orderInfo.status==2" class="orderInfostatus">待核销</view>
	<view v-if="orderInfo.status==3" class="orderInfostatus">已核销</view>
	<view v-if="orderInfo.status==4" class="orderInfostatus">已取消</view>
	<view v-if="orderInfo.status==5" class="orderInfostatus">已退款</view>

    <!-- 商品信息 -->
    <view class="product-section">
      <view class="section-title">商品信息</view>
      <view class="product-content">
        <image class="product-image" v-if="goodInfo.packageCoverImage" :src="goodInfo.packageCoverImage" mode="aspectFill"></image>
		<image class="product-image" v-else src="/static/img/icon_haibao.png" mode="aspectFill"></image>
        <view class="product-info">
          <view class="product-name">{{orderInfo.productName}}</view>
		  <view class="specs">商品规格：{{goodInfo.specs}}</view>
          <view class="product-price">¥{{goodInfo.originalPrice}}</view>
        </view>
      </view>
    </view>
	
	<view class="order-section" v-if="orderInfo.status==2">
		  <view class="section-title">核销码</view>
		  <view style="text-align: center;">
			  <tki-qrcode cid="qrcode1" ref="qrcode" :val="hexiaoIngo.code" :size="400" :unit="unit"
			  	:pdground="pdground" :icon="icon" :iconSize="iconsize" :lv="lv" :onval="onval"
			  	:loadMake="loadMake" :usingComponents="true" @result="qrR" />
		  </view>
		  <view class="order-item">
		    <text class="order-label">{{hexiaoIngo.code}}</text>
			<view class="order-value">
			  <text class="copy-text" @click="copyOrderNumber(hexiaoIngo.code)">复制</text>
			</view>
		  </view>
		   
	</view>

    <!-- 订单信息 -->
    <view class="order-section" style="margin-top: 20rpx;">
      <view class="section-title">订单信息</view>
      <view class="order-item">
        <text class="order-label">订单编码</text>
        <view class="order-value">
          <text>{{orderInfo.orderNo}}</text>
          <text class="copy-text" @click="copyOrderNumber(orderInfo.orderNo)">复制</text>
        </view>
      </view>
	 <!-- <view class="order-item">
	    <text class="order-label">支付价</text>
	    <text class="order-value">¥{{orderInfo.actualPay}}</text>
	  </view> -->
      <view class="order-item">
        <text class="order-label">原价</text>
        <text class="order-value">¥{{orderInfo.productOriginalAmount}}</text>
      </view>
	  <view class="order-item" v-if="orderInfo.makeTime">
	    <text class="order-label">预约时间</text>
	    <text class="order-value">{{orderInfo.makeTime}}</text>
	  </view>
	  <view class="order-item"  v-if="orderInfo.makeStoreName">
	    <text class="order-label">预约门店</text>
	    <text class="order-value">{{orderInfo.makeStoreName?orderInfo.makeStoreName:''}}</text>
	  </view>
	  <view class="order-item"  v-if="orderInfo.makeName">
	    <text class="order-label">预约姓名</text>
	    <text class="order-value">{{orderInfo.makeName?orderInfo.makeName:''}}</text>
	  </view>
	  <view class="order-item"  v-if="orderInfo.makePhone">
	    <text class="order-label">预约手机号</text>
	    <text class="order-value">{{orderInfo.makePhone?orderInfo.makePhone:''}}</text>
	  </view>
	  <view class="order-item"  v-if="orderInfo.makeIdCard">
	    <text class="order-label">预约身份证号</text>
	    <text class="order-value">{{orderInfo.makeIdCard?orderInfo.makeIdCard:''}}</text>
	  </view>
    </view>

    <!-- 底部固定操作菜单 -->
    <view class="fixed-bottom-menu" v-if="orderInfo.status==1">
      <view class="price-display">
        <text class="final-price">¥{{orderInfo.actualPay}}</text>
        <text class="original-price">¥{{orderInfo.productOriginalAmount}}</text>
      </view>
      <view class="action-buttons" >
        <view class="cancel-btn" @click="cancelOrder">取消支付</view>
        <view class="pay-btn" @click="confirmPayment">立即支付</view>
      </view>
    </view>
  </view>
</template>

<script>
import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue"
export default {
	components: {
		tkiQrcode
	},
  data() {
    return {
      countdownTime: '02:00', // 初始2分钟倒计时
      timer: null,
	  id:'',
	  orderInfo:'',
	  hexiaoIngo:'',
	  val: '二维码', // 要生成的二维码值
	  unit: 'upx', // 单位
	  background: '#b4e9e2', // 背景色
	  foreground: '#309286', // 前景色
	  pdground: '#262637', // 角标色
	  icon: '', // 二维码图标
	  iconsize: 40, // 二维码图标大小
	  lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
	  src: '', // 二维码生成后的图片地址或base64
	  onval: true, // val值变化时自动重新生成二维码
	  loadMake: true, // 组件加载完成后自动生成二维码
	  size: 500,
	  qrcodeShow: false,
	  qrcodeTop: '-100vh',
	  qrcodeTopVal: '',
	  ifShow: false,
	  goodInfo:'',
	  openid:'',
    }
  },
  onLoad(opt) {
   // this.startCountdown();
   this.id=opt.id
   this.openid= uni.getStorageSync("openid")
   this.getData()
  },
  onUnload() {
    clearInterval(this.timer);
  },
  methods: {
	qrR(){
		
	},
	getData(){
		uni.showLoading({
			title: '加载中'
		})
		this.$http('jeecg-boot/app/market/bicOrder/queryById',{
		   id:this.id
		},'GET').then(res => {
				   //console.log(res)
			 uni.hideLoading();
			 this.orderInfo=res.result
			 if(this.orderInfo.status==2){
				 //已支付
				 this.queryByOrderId()
			 }
			 this.getGoodData()
		 })
	},
	getGoodData(){
		uni.showLoading({
			title: '加载中'
		})
		this.$http('jeecg-boot/app/market/bicProduct/queryById',{
				   id:this.orderInfo.productId
		},'POST').then(res => {
				   //console.log(res)
			 uni.hideLoading();
			 this.goodInfo=res.result
		 })
	},
	queryByOrderId(){
		this.$http('jeecg-boot/app/market/bicVerificationCode/queryByOrderId',{
		   orderId:this.id
		},'GET').then(res => {
			this.hexiaoIngo=res.result
			 
		 })
	},
    startCountdown() {
      let minutes = 2;
      let seconds = 0;
      
      this.timer = setInterval(() => {
        if (seconds === 0) {
          if (minutes === 0) {
            clearInterval(this.timer);
            // 倒计时结束逻辑
            uni.showToast({
              title: '订单已自动取消',
              icon: 'none'
            });
            return;
          }
          minutes--;
          seconds = 59;
        } else {
          seconds--;
        }
        
        this.countdownTime = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
      }, 1000);
    },
    copyOrderNumber(w) {
      uni.setClipboardData({
        data: w,
        success: () => {
          uni.showToast({
            title: '复制成功'
          });
        }
      });
    },
    cancelOrder() {
      uni.showModal({
        title: '提示',
        content: '确定要取消支付吗？',
        success: (res) => {
          if (res.confirm) {
           uni.showLoading({
           	title: '加载中'
           })
           this.$http('jeecg-boot/app/market/bicOrder/cancelOrder',{
           		id:this.id,
           },'POST').then(res => {
           	 uni.showToast({
           	   title: '取消成功',
           	   icon: 'success'
           	 });
           	  uni.hideLoading();
			  this.getData()
			  
           	
            })
            // 实际开发中这里应该是调用取消订单接口
          }
        }
      });
    },
    confirmPayment() {
      this.$http('jeecg-boot/api/pay/wxPay',{
      		   orderId:this.id,
      		   openid:this.openid,
      },'POST').then(res => {
      		   //console.log(res)
      	 uni.hideLoading();
      	 this.requestPayment(res.result.data)
      	
       })
    },
	requestPayment(data){
		var that=this;
		var payInfo=data;
		console.log(payInfo)
		uni.requestPayment({
			provider: 'wxpay',
			//timeStamp: String(Date.now()),
			timeStamp: payInfo.timeStamp,
			nonceStr: payInfo.nonceStr,
			package:payInfo.package,
			signType: payInfo.signType,
			paySign: payInfo.paySign,
			appid:payInfo.appid,	
			
		    success: function (res) {
		        console.log('success:' + JSON.stringify(res));
				 uni.showToast({
					 title: '支付成功',
					 icon:'none',
					 duration: 2000
				 });
				 that.getData()
				
		    },
		    fail: function (err) {
			  console.log(err)
		      uni.showToast({
				 title: '支付失败',
				 icon:'none',
				 duration: 2000
		      });
			 
			  
		    }
		}); 
	}
  }
}
</script>

<style>
page {
  background-color: #f5f5f5;
  padding-bottom: 120rpx; /* 为底部固定菜单留出空间 */
}

.container {
  padding: 20rpx;
  
}

/* 倒计时区域 */
.countdown-section {
  background-color: #FFF8E6;
  border-radius: 10rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
}

.countdown {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
}

.countdown-text {
  font-size: 28rpx;
  color: #FF9500;
}

.countdown-time {
  font-size: 32rpx;
  color: #FF2442;
  font-weight: bold;
}

.hint-text {
  font-size: 26rpx;
  color: #FF9500;
}

/* 商品信息区域 */
.section-title {
  font-size: 28rpx;
  color: #999;
  margin-bottom: 15rpx;
}

.product-section {
  background-color: #fff;
  border-radius: 10rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
}

.product-content {
  display: flex;
}

.product-image {
  width: 160rpx;
  height: 160rpx;
  border-radius: 8rpx;
  margin-right: 20rpx;
}

.product-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.product-name {
  font-size: 30rpx;
  color: #333;
  font-weight: bold;
}

.product-price {
  font-size: 32rpx;
  color: #FF2442;
  font-weight: bold;
}

/* 订单信息区域 */
.order-section {
  background-color: #fff;
  border-radius: 10rpx;
  padding: 20rpx;
}

.order-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15rpx 0;
  font-size: 28rpx;
}

.order-item:not(:last-child) {
  border-bottom: 1rpx solid #f5f5f5;
}

.order-label {
  color: #666;
}

.order-value {
  color: #333;
  display: flex;
  align-items: center;
}

.copy-text {
  color: #576B95;
  margin-left: 15rpx;
}

/* 底部固定菜单 */
.fixed-bottom-menu {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20rpx;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.price-display {
  display: flex;
  align-items: center;
}

.final-price {
  font-size: 36rpx;
  color: #FF2442;
  font-weight: bold;
  margin-right: 15rpx;
}

.original-price {
  font-size: 24rpx;
  color: #999;
  text-decoration: line-through;
}

.action-buttons {
  display: flex;
}

.cancel-btn {
  padding: 15rpx 30rpx;
  border: 1rpx solid #ccc;
  border-radius: 50rpx;
  color: #666;
  font-size: 28rpx;
  margin-right: 20rpx;
}

.pay-btn {
  padding: 15rpx 30rpx;
  background: linear-gradient(to right, #FF2442, #FF6B81);
  border-radius: 50rpx;
  color: #fff;
  font-size: 28rpx;
  font-weight: bold;
}
.orderInfostatus{
	background: #fff;
	text-align: center;
	font-size: 36rpx;
	line-height: 80rpx;
	margin-bottom: 20rpx;
}
.specs{
	font-size: 26rpx;
	    color: #666;
}
</style>